<template>
<view class="info-box">
	<view class="example-details" v-if="showGoHome!=1 || exampleState==2&&fail_task==-1">
		<view class="state-tips">{{exampleState==1?'创建成功，教师审核':exampleState==3?'重要他人审核未通过':fail_task!=-1?'任务审核未通过，请重新提交':'重要他人审核通过'}}</view>
		<view class="ce-box xd-box-shadow">
			<view class="ex-name ce-item">
				<text class="name">名 字</text>
				<text class="value">{{exampleInfo.name}}</text>
			</view>
			<view class="ce-item" v-if="exampleInfo.characterType>0">
				<text class="name">属 性</text>
				<text class="value">{{exampleInfo.characterType==1?'现实人物':'虚拟人物'}}</text>
			</view>
			<view class="ex-image ce-item">
				<text class="name">图 片</text>
				<view class="imgs">
					<image :src="exampleInfo.pictureUrl" mode="aspectFill" @click="previewImage([exampleInfo.pictureUrl])"></image>
				</view>
			</view>
			<view class="reason-item" v-if="exampleInfo.reason&&JSON.parse(exampleInfo.reason).length>0">
				<text class="name">选择理由</text>
				<view class="list">
					<view class="ri-item" v-for="(item, i) in JSON.parse(exampleInfo.reason)" :key="i">
						<text class="tag">{{i+1}}</text>
						{{item}}
					</view>
					
				</view>
			</view>
			<view class="ex-desc">
				<text class="name">基本特征</text>
				<view class="brief-box">
					{{exampleInfo.brief}}
				</view>
			</view>
			<view class="reasons-refusal" v-if="exampleState==3&&exampleInfo.examineReason">
                注：{{exampleInfo.examineReason}}
            </view>
		</view>
		<view class="ce-box ex-task ce-item xd-box-shadow" v-if="exampleTask.length>0">
			<text class="name">任务</text>
			<view class="list">
				<view class="select-picker">
					<view class="csu-item">
						<text>{{startDate}}</text>
					</view>
					<view class="" style="margin: 0 20px;">-</view>
					<view class="csu-item">
						<text>{{range}}</text>
					</view>
				</view>
				<!-- <view class="item" v-for="(task, index) in exampleTask" :key="index">
					<text>{{task.content}}</text>
					<text class="state" v-if="handleTaskState(task.state)==1">审核中</text>
				</view> -->
				<view v-for="task in exampleTask" :key="task.id">
					<view class="task-item" :class="handleTaskState(task.state)===3 ?'task-item-err':''">
						<input type="text" :disabled="!task.id||handleTaskState(task.state)==3?false:true" :value="task.content" @input="eve=>{taskInput(task, eve)}" placeholder="请输入任务" />
						<view class="audit-state">
							<uni-icons v-if="handleTaskState(task.state)==2" color="#55acee" size="24" type="checkbox-filled"></uni-icons>
							<text class="state"  v-else-if="handleTaskState(task.state)==1">审核中</text>
							<image class="edit-icon" v-else @click="editTask(task, index)" src="/static/zhxg.png" mode="aspectFit"></image>
						</view>
					</view>
					<view class="task-err" v-if="handleTaskState(task.state)==3&&task.reason">注：{{task.reason}}</view>
                </view>
			</view>
		</view>
		<view style="margin-top: 16rpx;" class="confirm-create xd-btn-text" v-if="isExpired" @click="createExample()">
			{{exampleInfo.characterType?'重设任务':'重新创建'}}
		</view>
		<view class="confirm-create xd-btn-text" v-else-if="exampleState==3 || fail_task!=-1" @click="confirmBtn()">
			{{exampleState==3?'重新创建':'提交'}}
		</view>
		<view class="confirm-create xd-btn-text" v-else-if="showGoHome==1" @click="rolePage()">
			点击跳转到首页
		</view>
	</view>
	<view class="example-audit" v-else-if="exampleInfo.id">
        <view class="state-tips">{{exampleState==1?'创建成功，教师审核':exampleState==3?'重要他人审核未通过':fail_task!=-1?'任务审核未通过，请重新提交':'重要他人审核通过'}}</view>
        <view class="xd-box-shadow example-info">
            <view class="name">
                <view>
					{{exampleInfo.name}}
                	<text v-if="exampleInfo.characterType>0">（{{exampleInfo.characterType==1?'现实人物':'虚拟人物'}}）</text>
				</view>
				<view class="audit-state" v-if="exampleState==2">
					<uni-icons color="#55acee" size="24" type="checkbox-filled"></uni-icons>
				</view>
				<view class="audit-state" v-else>
					<text class="state">{{exampleState==1?'审核中':'审核失败'}}</text>
				</view>
            </view>
			
            <view class="info flex">
                <view class="img">
                    <image :src="exampleInfo.pictureUrl" mode="aspectFill"></image>
                </view>
                <view class="reason-list" v-if="exampleInfo.reason&&JSON.parse(exampleInfo.reason).length>0">
                    <text class="title">选择理由</text>
                    <view class="list">
                        <view v-for="(item, i) in JSON.parse(exampleInfo.reason)" :key="i">
                            {{i+1}}.{{item}}{{i==2?'。':'；'}}
                        </view>
                       
                    </view>
                </view>
            </view>
            <view class="introduce">
                <view class="title">基本特征</view>
                {{exampleInfo.brief}}
            </view>
            <view class="reasons-refusal" v-if="exampleState==3&&exampleInfo.examineReason">
                注：{{exampleInfo.examineReason}}
            </view>
        </view>
        <view class="task-list xd-box-shadow">
            <view class="title">
                <text>重要他人任务</text>
            </view>
            <view class="tasks">
                <view v-for="task in exampleTask" :key="task.id">
					<view class="task-item" :class="handleTaskState(task.state)===3 ?'task-item-err':''">
						<input type="text" :disabled="!task.id||handleTaskState(task.state)==3?false:true" :value="task.content" @input="eve=>{taskInput(task, eve)}" placeholder="请输入任务" />
						<view class="audit-state">
							<uni-icons v-if="handleTaskState(task.state)==2" color="#55acee" size="24" type="checkbox-filled"></uni-icons>
							<text class="state"  v-else-if="handleTaskState(task.state)==1">审核中</text>
							<image class="edit-icon" v-else @click="editTask(task, index)" src="/static/zhxg.png" mode="aspectFit"></image>
						</view>
					</view>
					<view class="task-err" v-if="handleTaskState(task.state)==3&&task.reason">注：{{task.reason}}</view>
                </view>
            </view>
        </view>
		<view class="confirm-create xd-btn-text" v-if="isExpired" @click="createExample()">
			{{exampleInfo.characterType?'重设任务':'重新创建'}}
		</view>
		<view class="confirm-create xd-btn-text" v-else-if="exampleState==3 || fail_task!=-1" @click="confirmBtn()">
			{{exampleState==3?'重新创建':'提交'}}
		</view>
        <view class="confirm-create xd-btn-text" v-else-if="showGoHome==1" @click="rolePage()">
			点击跳转到首页
		</view>
	</view>
	
	<uni-transition mode-class="fade"
		:styles="{position: 'fixed', top: 0, left: `var(--window-left)`,
		right: `var(--window-right)`, bottom: '0', background: 'rgba(0, 0, 0, .6)', 'z-index': 9}" :show="task_expiration" @click="closePopup">
	</uni-transition>
	<uni-transition mode-class="fade"
		:styles="fade_class"
		:show="task_expiration">
		<view class="task-exp-tips popup-top">
			<uni-icons type="clear"  @click="closePopup"></uni-icons>
			<text class="te-title">恭喜{{studentInfo.name}}同学~</text>
			<view class="te-content">
				你完成了阶段性任务，跨越了一座山峰，<br>快来设置下一阶段任务，攀登下一座高峰！
			</view>
		</view>
	</uni-transition>
	</view>
</template>

<script>
	export default {
		data(){
			return {
				studentInfo: getApp().globalData.userInfo || {},
				exampleTask: [],
				exampleInfo: {},
				exampleState: 0, // 1审核中，2通过， 3拒绝
				startDate: '',
				range: '',
				isExpired: false,
				task_expiration: false,
				fade_class: {
					position: 'absolute',
					'z-index': 9
				},
				// 审核中
				upload_tasks: [],
				fail_task: -1,
				showGoHome: 0
			}
		},
		onLoad(options){
			this.showGoHome = options.showHome
			this.getBindExample();
			this.getExampleTask();
		},
		methods: {
			getBindExample(){
				this.api.get('sExample/findBindExample').then(res=>{
					if(res.data.state == 'ok'){
						let info = res.data.example || {};
						if(!info.id){
							uni.redirectTo({
								url: '/pages/student/create-example'
							})
							return
						}
						info.pictureUrl = this.api.xiaodeObsUrl + info.pictureUrl;
						this.exampleInfo = info;
						this.exampleState = info.state==1||info.state==2 ? 1 : info.state==3||info.state==5? 3 : 2;
						uni.setNavigationBarTitle({
							title: info.name
						})
					}
				})
			},
			getExampleTask(){
				this.api.get('sExample/getExampleTask').then(res=>{
					let tasks = res.data.setList.reverse();
					this.exampleTask = tasks;
					let item = tasks[0];
					this.fail_task = tasks.findIndex(task=>this.handleTaskState(task.state)==3);

					let end_time = item.deadline || '', 
						start_time = item.addTime;
					let overdue = true;
					if(end_time){
						overdue = new Date()>new Date(end_time.split('-').join('/'));
						
						if(overdue && tasks[0].state==2){
							this.task_expiration = true;
						}
						this.range = end_time.split(' ')[0];
						this.startDate = start_time.split(' ')[0]
					}
					this.isExpired = overdue;
				})
			},
			handleTaskState(state){
				return state==1 || state==2 ? 1 : state==3 || state==5? 3 : 2;
			},
			previewImage(list){
				uni.previewImage({
					urls: list,
					longPressActions: {
						itemList: [],
						success: function(data) {
							
						},
						fail: function(err) {
							console.log(err.errMsg);
						}
					}
				});
			},
			// 修改任务
			taskInput(task, eve){
				this.$set(task, 'content', eve.detail.value);
			},
			editTask(item){
				this.$set(item, 'content', '')
				item.edit = true;
			},
			addExampleTask(){
				this.api.get('sExample/addExampleTask', {
					tasks: JSON.stringify(this.upload_tasks),
					date: this.range,
					startDate: this.startDate
				}).then(res=>{
					if(res.data.state=='ok'){
						this.getExampleTask();
						uni.showToast({
							title: '修改成功',
							icon: 'none',
							duration: 2000,
							mask: true,
							position: 'bottom'
						})
					}
					
				})
			},
            rolePage(){
                uni.reLaunch({
                    url: "/pages/student/task-page"
                })
            },
			createExample(){
				let overdue = this.isExpired?1:'';
				let needRefine = this.exampleInfo.characterType?'':1;
				uni.navigateTo({
					url: '/pages/student/create-example?overdue='+overdue +'&needRefine=' + needRefine
				})
			},
			confirmBtn(){
                if(this.exampleState==3){
                    uni.navigateTo({
                        url: '/pages/student/create-example'
                    })
                    return;
                }

				this.upload_tasks = [];
				for(let i=0; i<this.exampleTask.length; i++){
					let item = this.exampleTask[i], obj = {};
					
					if(this.exampleTask[i].content){
						obj.content = item.content;
						if(item.id){
							obj.taskId = item.id;
						}
						
						this.upload_tasks.push(obj);
					}
				}
				let taskMsg = !this.range?'请选择结束时间':this.upload_tasks.length!=3?'任务内容不能为空':''
				if(taskMsg!=''){
					uni.showToast({
						title: taskMsg,
						icon: 'none',
						duration: 2000,
						mask: true,
						position: 'bottom'
					})
					return;
				}
				// 以上是判断添加任务需要满足的条件
				this.addExampleTask()
			},
			closePopup(){
				this.task_expiration = false;
			}
		}
	}
</script>

<style lang="less">
	.info-box{

		.confirm-create{
            margin-top: 32rpx;
			background-color: #55acee;
			border-radius: 8rpx;
			height: 70rpx;
			width: 100%;
			line-height: 70rpx;
			text-align: center;
			color: #FFFFFF;
			font-size: 32rpx;
		}
		.task-exp-tips{
			font-size: 26rpx;
			width: 608rpx;
			
			padding: 80rpx 0 70rpx 64rpx;
			box-sizing: border-box;
			.uni-icons{
				position: absolute;
				top: 24rpx;
				right: 32rpx;
			}
		}
		
		.reasons-refusal{
			margin-top: 16rpx;
			color: #f00;
			font-size: 24rpx;
		}
	}
	.example-details{
		padding: 32rpx;
		.state-tips{
			display: block;
			text-align: center;
			margin-bottom: 24rpx;
			font-size: 32rpx;
		}
		
		.ce-box{
			padding: 24rpx 32rpx;
			margin-bottom: 32rpx;
		}
		.name{
			width: 156rpx;
			white-space: nowrap;
			color: #000;
			font-size: 32rpx;
		}
		.ce-item{
			display: flex;
			align-items: stretch;
			margin-bottom: 24rpx;
			
			
			.name{
				letter-spacing: .8em;
				padding-bottom: 12rpx;
			}
			.value, .imgs{
				padding-bottom: 12rpx;
				width: calc(100% - 156rpx);
				border-bottom: 2rpx solid #f2f2f2;
			}
			.imgs{
				font-size: 0;
				
				image{
					width: 90rpx;
					height: 90rpx;
					background-color: #FFFFFF;
					border-radius: 10rpx;
					margin-top: 24rpx;
				}
			}
			&.ex-image{
				padding-bottom: 24rpx;
				image{
					margin: 0;
				}
			}
		}
		
		.ex-name{
			align-items: center;
		}
		.reason-item{
			padding-bottom: 12rpx;
			border-bottom: 2rpx solid #f2f2f2;
			.list{
				margin-top: 32rpx;
			}
			.ri-item{
				// display: inline-block;
				margin-right: 32rpx;
				margin-bottom: 12rpx;
			}
			.tag{
				display: inline-block;
				width: 46rpx;
				height: 38rpx;
				text-align: center;
				line-height: 38rpx;
				background: #55acee;
				border-radius: 10rpx;
				font-size: 24rpx;
				color: #fff;
				margin-right: 24rpx;
			}
		}
		.ex-desc{
			margin-top: 32rpx;
			.brief-box{
				margin-top: 16rpx;
			}
		}
		.ex-task{
			.name{
				letter-spacing: 0em;
				line-height: 80rpx;
			}
			.select-picker{
				// border-bottom: 1px solid #dcdfe6;
				display: flex;
				align-items: center;
				margin-bottom: 20rpx;
				.csu-item{
					width: 100%;
					display: flex;
					align-items: center;
					justify-content: space-between;
					height: 40px;
					border-bottom: 1px solid #dcdfe6;
					font-size: 14px;
				}
				.date-x-icon{
					min-width: 25px;
					width: 25px;
					height: 25px;
				}
				.uni-date__x-input{
					padding: 0;
				}
			}
			.list{
				width: 100%;
			}
			.task-item{
				font-size: 24rpx;
				display: flex;
				justify-content: space-between;
				align-items: center;
				border-bottom: 2rpx solid #f2f2f2;
				// height: 70rpx;
				padding: 14rpx 0;
				margin-bottom: 20rpx;
				input{
					min-width: 78%;
					&.input-placeholder{
						color: #999;
					}
				}
				.cont{
					width: 460rpx;
				}
				.state{
					margin-left: 24rpx;
					white-space: nowrap;
					color: #55acee;
					font-size: 24rpx;
				}
			}
			.task-item-err{
				padding: 16rpx 0 0;
				border-bottom: 2rpx solid red;
			}

			.task-err{
				font-size: 24rpx;
				color: red;
			}

			.edit-icon{
				width: 56rpx;
				height: 56rpx;
			}
			.item{
				border-bottom: 2rpx solid #f2f2f2;
				// height: 70rpx;
				padding: 14rpx 0;
				margin-bottom: 20rpx;
				display: flex;
				justify-content: space-between;
				align-items: center;
				
			}
		}
	}
	.example-audit{
		padding: 32rpx;
		.state-tips{
			display: block;
			text-align: center;
			margin-bottom: 24rpx;
			font-size: 32rpx;
		}
		
		.audit-state {
			width: 104rpx;
			white-space: nowrap;
			text-align: center;
			.state{
				display: inline-block;
				width: 104rpx;
				height: 38rpx;
				line-height: 38rpx;
				background: #d7d7d7;
				border-radius: 10rpx;
				font-size: 24rpx;
				color: #7F7F7F
			}
		}
		.example-info{
			padding: 32rpx;
			.name{
				font-size: 32rpx;
				color: #000;
				line-height: 44rpx;
                padding-bottom: 8rpx;
				border-bottom: 2rpx solid #f2f2f2;
				display: flex;
				justify-content: space-between;
				align-items: center;
			}
			.info{
				margin-top: 32rpx;
                font-size: 0;
			}
			.img{
				image{
					width: 200rpx;
					height: 200rpx;
					border-radius: 10rpx;
					background: #f5f5f5;
				}
			}
			.reason-list{
				width: calc(100% - 232rpx);
				margin-left: 32rpx;
                .title{
                    display: inline-block;
                    font-size: 28rpx;
                    margin-bottom: 32rpx;
                }
				.list{
					margin-bottom: 12rpx;
                    font-size: 26rpx;
                    line-height: 40rpx;
                }
			}
			.keyword{
				line-height: 60rpx;
			}
			.introduce{
				margin-top: 32rpx;
				line-height: 44rpx;
				font-size: 24rpx;
				.title{
					font-size: 26rpx;
					color: #333;
                    margin-bottom: 8rpx;
				}
			}
		}
		.flex{
			display: flex;
		}
		.task-list{
			margin-top: 32rpx;
			padding: 32rpx;
			.title{
				display: flex;
				justify-content: space-between;
				align-items: flex-end;
				padding-bottom: 8rpx;
				border-bottom: 2rpx solid #f2f2f2;
				font-size: 28rpx;
				.time{
					font-size: 24rpx;
				}
			}
			.tasks{
				margin-top: 24rpx;
			}
			
			.task-item{
				font-size: 24rpx;
				padding: 16rpx 0;
				display: flex;
				justify-content: space-between;
				align-items: center;
				input{
					width: calc(100% - 128rpx);
				}
				.cont{
					width: 460rpx;
				}
			}
			.task-item-err{
				padding: 16rpx 0 0;
				border-bottom: 2rpx solid red;
			}

			.task-err{
				font-size: 24rpx;
				color: red;
			}

			.edit-icon{
				width: 56rpx;
				height: 56rpx;
			}
		}
		.change-btn{
			margin-top: 24rpx;
			text{
				display: inline-block;
				width: 50%;
				height: 56rpx;
				line-height: 56rpx;
				text-align: center;
			}
			.prev{
				background-color: #81d3f8;
				color: #555;
			}
			.next{
				background-color: #55acee;
				color: #f2f2f2;
			}
		}
	}
	
	
</style>
